<template>
  <Card class="!mt-10px"><div class="w-full h-250px" ref="chartRef"></div></Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'PieChart',
  });
</script>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';

  const chartRef = ref();
  const { setOptions, getInstance } = useECharts(chartRef);

  onMounted(() => {
    const option = {
      title: {
        text: '家用电器',
        subtext: 312,
        left: 'center',
        top: 'middle',
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              name: '家用电器',
              value: 312,
            },
            {
              name: '食用酒水',
              value: 336,
            },
            {
              name: '个护健康',
              value: 342,
            },
            {
              name: '服饰箱包',
              value: 41,
            },
            {
              name: '母婴产品',
              value: 188,
            },
            {
              name: '其他',
              value: 94,
            },
          ],
          radius: ['40%', '80%'],
          label: {
            formatter: '{b}: {c}',
          },
        },
        // {
        //   type: 'pie',
        //   data: [
        //     {
        //       name: '家用电器',
        //       value: 312,
        //     },
        //     {
        //       name: '食用酒水',
        //       value: 336,
        //     },
        //     {
        //       name: '个护健康',
        //       value: 342,
        //     },
        //     {
        //       name: '服饰箱包',
        //       value: 41,
        //     },
        //     {
        //       name: '母婴产品',
        //       value: 188,
        //     },
        //     {
        //       name: '其他',
        //       value: 94,
        //     },
        //   ],
        //   radius: ['40%', '80%'],
        //   label: {
        //     formatter: '{b} \n {c}',
        //     position: 'center',
        //   },
        // },
      ],
    };

    setOptions(option);

    const myEcharts = getInstance();

    myEcharts.on('mouseover', function (params) {
      const {
        data: { name, value },
      } = params;

      // 重新调用setOption，只会变化要更新的内容，其他内容用之前的值
      myEcharts.setOption({
        title: {
          text: name,
          subtext: value,
        },
      });
    });
  });
</script>
